<template>
<view>
	<!-- 搜索框 -->
	<ugo-search></ugo-search>
	<!-- 轮播图 -->
     <u-swiper 
	 :list="swiperList" 
	 name='image_src' 
	 :height="340" 
	 :effect3d="true"></u-swiper>
	 <!-- 导航 -->
	 <view class="nav u-flex" >
		 <navigator v-for="item in navList" :key="item.name" class="u-flex-1 u-p-20" >
			 <u-image width="100%" mode="widthFix" :src="item.image_src" ></u-image>
		 </navigator>
	 </view>
	 <!-- 商品楼层 -->
	 <view class="floor">
		 <view 
		 class="floor-group" 
		 v-for="item1 in floorList" 
		 :key="item1.name">
		 <!-- 标题 -->
		 <view class="floor-group-title">
			 <u-image width="100%" mode="widthFix" :src="item1.floor_title.image_src" ></u-image>
		 </view>
		 <!-- 内容 -->
		 <view class="floor-group-content">
			 <navigator v-for="item2 in item1.product_list" :key="item2.name">
				 <!-- uView框架的图片组件的mode默认（widthFix这个有问题），图片显示会有问题 -->
				 <u-image width="100%" height="100%" mode="scaleToFill" :src="item2.image_src"></u-image>
			 </navigator>
		 </view>
		 </view>
	 </view>
</view>
</template>

<script>
	export default {
		data(){
			return{
				// 轮播图数据
				swiperList:[],
				// 导航数据
				navList:[],
				// 楼层数据
				floorList:[]
			}
		},
		 onLoad() {
			// 获取轮播图数据
    // const [err,res] = await uni.request({
    // 	url:'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata'
    // })
    // 	this.swiperList = res.data.message

// 简化后的发送请求方式
this.getSwiper()
this.getNavs()
this.getFloors()
     
		},
		methods: {
    // 封装获取轮播图数据
	   async getSwiper(){
 const result = await this.$u.get('/home/swiperdata')
	this.swiperList = result.message
	   },

	// 获取导航数据
        async getNavs(){
			const res = await this.$u.get('/home/catitems')
			this.navList = res.message
		},
	
	// 获取楼层数据
	async getFloors(){
		const res = await this.$u.get('home/floordata')
		console.log(res);
		this.floorList = res.message
	}





		}
	}
</script>

<style lang="scss" scoped>
	.floor-group-content{
		// 给每张图片添加浮动,图片不规范，只能自己设置大小
		navigator{
		float: left;
		width: 232rpx;
		height: 188rpx;
		margin-left: 15rpx;
		}
		// 第一张图片高度变两倍
		navigator:nth-child(1){
			height: 390rpx;
		}
		// 给最后两张图片外边距
		navigator:nth-last-child(-n + 2){
			margin-top: 15rpx;
		}
	}
</style>
